<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>用户数据显示表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../res/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        input {
            height: 33px;
            line-height: 33px;
            padding: 0 7px;
            border: 1px solid #ccc;
            border-radius: 2px;
            margin-bottom: -2px;
            outline: none;
        }

        input:focus {
            border-color: #009E94;
        }
    </style>
</head>
<body>

<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
  <div>
	<button class="layui-btn" lay-event="add">增加数据</button>
      搜索： <input id="userName" type="seach" placeholder="输入关键字" autocomplete="off" style="width: 120px;"/>
      <button class="layui-btn" lay-event="btn-search">&nbsp;&nbsp;搜索&nbsp;&nbsp;</button>
  </div>
</script> 
<script type="text/html" id="barDemo">
 	{{# if(d.userId=='4a928feef2274993b4e2024e893b32e1'){ }}
	    <a class="layui-btn layui-btn-disabled layui-btn-xs" lay-event="edidft" >编辑</a>
 		 <a class="layui-btn layui-btn-disabled layui-btn-danger layui-btn-xs" lay-event="ssel" >删除</a>
	    {{# } else{}}
		<a class="layui-btn  layui-btn-xs" lay-event="edit" >编辑</a>
 	 	<a class="layui-btn  layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	    {{# } }}
</script>
<script src="../res/layui/layui.js" charset="utf-8"></script>
<script src="../res/js/jquery-3.4.1.min.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
 
<script>
var table2 = null ;
layui.use('table', function(){
  var table = layui.table;
  var form = layui.form ;
  
  table2 = table.render({
    elem: '#test'
    ,url:'../../User/findAll'
    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
      title: '提示'
      ,layEvent: 'LAYTABLE_TIPS'
      ,icon: 'layui-icon-tips'
    }]
    ,title: '用户数据表'
    ,cols: [[
      {field:'userId', title:'ID', hide:'true' , width:80, fixed: 'left', unresize: true, sort: true}
      ,{field:'userName', title:'用户名', width:120 ,fixed: 'left'}
      ,{field:'userPwd', title:'用户密码', width:120}
      ,{field:'companyName' , title:'职位', width:120}
      ,{field:'clerkName' , title:'姓名', width:120}
      ,{field:'userEmail', title:'邮箱', width:150}
      ,{field:'userPhone', title:'手机号', width:80, sort: true}
      ,{field:'userTime', title:'创建时间', width:100}
      ,{field:'userImg' ,title:'图片' , width:100 ,templet:'#userImg'}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
    ,page: true
  });
  //头工具栏事件
  table.on('toolbar(test)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
      case 'add':
        var data = checkStatus.data;
        layer.open({
        	  type: 2,
        	  title: '数据',
        	  closeBtn: 1, //不显示关闭按钮
        	  shade: [0],
        	  area: ['80%', '90%'],
        	  anim: 2,
        	  content: ['UserAddOrUpdate.html', 'yes'], //iframe的url，no代表不显示滚动条
        	  end: function(){
        		  table2.reload();
        	  }
        	});
      break;
      
      //自定义头工具栏右侧图标 - 提示
      case 'LAYTABLE_TIPS':
        layer.alert('这是工具栏右侧自定义的一个图标按钮');
      break;
      case 'btn-search':
          table2.reload({
              where: {
                  userName: $("#userName").val()
              }/*,
           page: { curr: 1 }*/
          });
      break;
    };
  });
  
  //监听行工具事件
  table.on('tool(test)', function(obj){
    var data = obj.data;
    //console.log(obj)
    if(obj.event === 'del'){
	      layer.confirm('真的删除行么', function(index){
	        var url = "../../User/delete";
	        var datas = {userId:data.userId};
	        $.post(url,datas,function(obj){
	        	if(obj.state==1){
	        		layer.msg("操作成功");
	        		table2.reload();
	        	}
	        	
	        },'json')
	      });
    } else if(obj.event === 'edit'){
    	layer.open({
        	  type: 2,
        	  title: '数据',
        	  closeBtn: 1, //不显示关闭按钮
        	  shade: [0],
        	  area: ['80%', '90%'],
        	  anim: 2,
        	  content: ['UserAddOrUpdate.html?id='+data.userId], //iframe的url，no代表不显示滚动条
        	  end: function(){
        		  table2.reload();
        	  }
        	});
    }
  });
  form.on('switch(sexDemo)', function(obj){
	    var url = "../User/update.action";
	    var data = {userId:this.value , userValidity:obj.elem.checked}
	    $.post(url,data,function(obj){
	    	if(obj.state==1){
	    		layer.msg(obj.msg);
	    		table2.reload();
	    	}else{
	    		layer.msg(obj.msg);
	    	}
	    },"json")
	});
  /*$("#seachTable").on("click",function(){
      table2.reload({
          where: {
          	userName: $("#userName").val()
          	}/!*,
           page: { curr: 1 }*!/
      });
	})*/
});
</script>
<script type="text/html" id="userImg">
	<img src='../../{{d.userImg}}' name="userImg">
</script>
</body>
</html>